import React, { memo, useState, useRef } from "react";
import { UserByCommentWrap } from "./style";
import { Mentions } from "antd";
import { getSizeImage, getMonthDayHouMin } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import { emojiImg } from "@/services/local-data";
import CommentSpan from "@/components/aboutComment/commentSpan";
import SecondComment from "@/components/aboutComment/secondComment";

export default memo(function UserComment(props) {
  const id = props.id;
  const type = props.type;
  const t = props.t;
  const { Option } = Mentions;
  const mentiosRef = useRef();
  const [page, setPage] = useState(1);
  const userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
  const loginHeader =
    userInfo && userInfo.length !== 0 ? userInfo.data.profile : [];
  const userId =
    loginHeader && loginHeader.length !== 0 ? userInfo.data.profile.userId : "";

  const onChange = (value) => {};
  const onSelect = (option) => {};

  const provied = () => {
    setPage(1);
  };

  const next = () => {
    setPage(2);
  };

  document.addEventListener("click", (e) => {
    e.preventDefault();
    if (
      e.target.parentNode.className !== "emojiR" &&
      e.target.parentNode.className !== "emojid" &&
      e.target.parentNode.className !== "emojiImg" &&
      e.target.parentNode.className !== "nextpro" &&
      e.target.parentNode.className !== "page" &&
      e.target.parentNode.className !== "emojiDiv"
    ) {
      if (document.getElementById("emojiDiv") != null) {
        document.getElementById("emojiDiv").style.display = "none";
      }
    }
  });

  const gotoInput = (title) => {
    mentiosRef.current.focus();
    if (mentiosRef.current.textarea.selectionStart != null) {
      mentiosRef.current.state.value =
        mentiosRef.current.textarea.value.substring(
          0,
          mentiosRef.current.textarea.selectionStart
        ) +
        "[" +
        title +
        "]" +
        mentiosRef.current.textarea.value.substring(
          mentiosRef.current.textarea.selectionStart
        );
      return;
    }
    mentiosRef.current.state.value =
      mentiosRef.current.textarea.value + "[" + title + "]";
  };

  const emojiClcik = () => {
    mentiosRef.current.focus();
    if (document.getElementById("emojiDiv").style.display === "none") {
      document.getElementById("emojiDiv").style.display = "block";
    } else {
      document.getElementById("emojiDiv").style.display = "none";
    }
  };

  const sendCommentAxios = () => {
    sendComment(t, type, id, value).then((res) => {
      if (res.code === 200) {
        props.addNumQ();
      }
    });
  };

  return (
    <UserByCommentWrap>
      {/* <Picker set='apple' /> */}
      <div id="comment-send">
        <img
          className="userHead"
          src={
            loginHeader != null
              ? loginHeader.avatarUrl
              : "http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
          }
          alt=""
        />
        <div className="comment-right">
          <Mentions
            style={{ width: "100%", height: "63px", fontSize: "12px" }}
            onChange={onChange}
            onSelect={onSelect}
            autoSize={{ minRows: 2, maxRows: 3 }}
            ref={mentiosRef}
          >
            <Option value="afc163">afc163</Option>
            <Option value="zombieJ">zombieJ</Option>
            <Option value="yesmeck">yesmeck</Option>
          </Mentions>
          <div className="emojiat">
            <div className="emojiR">
              <i onClick={emojiClcik} className="emoji imgIcon"></i>
              <div id="emojiDiv" className="emojiDiv emtbg">
                <div className="emojid">
                  {page === 1
                    ? emojiImg.slice(0, 50).map((item, index) => {
                        return (
                          <span
                            key={index + Math.random()}
                            onClick={() => gotoInput(item.title)}
                            title={item.title}
                            className="emojiImg"
                          >
                            <img src={item.url} alt={item.title} />
                          </span>
                        );
                      })
                    : page === 2
                    ? emojiImg.slice(50, 60).map((item, index) => {
                        return (
                          <span
                            key={index + Math.random()}
                            onClick={() => gotoInput(item.title)}
                            title={item.title}
                            className="emojiImg"
                          >
                            <img src={item.url} alt={item.title} />
                          </span>
                        );
                      })
                    : ""}
                </div>
                <div className="nextpro">
                  <div className="page">
                    <i onClick={provied} className="provied btn-button"></i>
                    <em className="pagenum">{page}/2</em>
                    <i onClick={next} className="next btn-button"></i>
                  </div>
                </div>
              </div>
            </div>
            <i className="atb imgIcon"></i>
            <div onClick={sendCommentAxios} className="send">
              评论
            </div>
          </div>
        </div>
      </div>
      {props.comments.comments.length !== 0 ? (
        <div className="comment-best">
          {props.pageNum == 1 ? (
            props.comments.hotComments.length !== 0 ? (
              <div>
                <p className="comment-best-p">精彩评论</p>
                <div className="comment-best-three">
                  {props.comments.code == 200 &&
                  props.comments.hotComments !== undefined
                    ? props.comments.hotComments.map((item, index) => {
                        return (
                          <div key={index} className="hot-comment-box">
                            <div className="hot-comment-s-box">
                              <div>
                                <img
                                  src={getSizeImage(item.user.avatarUrl, 50)}
                                  alt=""
                                />
                              </div>
                              <div className="hot-comment-s-box-xq">
                                {/* <a  >{item.user.nickname}</a><span>{item.user.vipRights?<img className="level" src={require(level.filter(itemb=>itemb.level===item.user.vipRights.redVipLevel)[0].url).default} alt=""/>:""}：</span> */}
                                <a>{item.user.nickname}</a>
                                <span>
                                  {item.user.vipRights ? (
                                    <img
                                      className="level"
                                      src={
                                        require("@/assets/img/lv" +
                                          item.user.vipRights.redVipLevel +
                                          ".png").default
                                      }
                                      alt=""
                                    />
                                  ) : (
                                    ""
                                  )}
                                  ：
                                </span>

                                <span className="hot-comment-content">
                                  &nbsp;
                                  <CommentSpan content={item.content} />
                                </span>
                                <SecondComment
                                  beReplied={
                                    item.beReplied != null ? item.beReplied : []
                                  }
                                />
                                <div className="hot-comment-bb">
                                  <div className="hot-comment-time">
                                    {getMonthDayHouMin(item.time)}
                                  </div>
                                  <div className="hot-comment-dz">
                                    {item.user.userId === userId ? (
                                      <div className="deleteD">
                                        <span className="delete">删除</span>
                                        <span className="shu">|</span>
                                      </div>
                                    ) : (
                                      <></>
                                    )}
                                    <i className="dz-icon icon2"></i>
                                    {item.likedCount === 0 ? (
                                      <></>
                                    ) : (
                                      item.likedCount
                                    )}
                                    <span className="shu">|</span>
                                    <span>回复</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        );
                      })
                    : ""}
                  <br />
                  <br />
                </div>
              </div>
            ) : (
              ""
            )
          ) : (
            ""
          )}

          <div className="new-comment-box">
            <p className="new-comment-box-p">
              最新评论({props.comments.length !== 0 ? props.comments.total : ""}
              )
            </p>
            {props.comments.length !== 0
              ? props.comments.comments.slice(0, 10).map((item, index) => {
                  return (
                    <React.Fragment key={index + Math.random()}>
                      <div className="new-comment-box">
                        <div className="new-comment-s-box">
                          <div>
                            <img
                              src={getSizeImage(item.user.avatarUrl, 50)}
                              alt=""
                            />
                          </div>
                          <div className="new-comment-s-box-xq">
                            <a>{item.user.nickname}</a>
                            <span>
                              {item.user.vipRights ? (
                                <img
                                  className="level"
                                  src={
                                    require("@/assets/img/lv" +
                                      item.user.vipRights.redVipLevel +
                                      ".png").default
                                  }
                                  alt=""
                                />
                              ) : (
                                ""
                              )}
                              ：
                            </span>
                            <span className="new-comment-content">
                              &nbsp;
                              <CommentSpan content={item.content} />
                            </span>
                            <SecondComment
                              beReplied={
                                item.beReplied != null ? item.beReplied : []
                              }
                            />
                            <div className="new-comment-bb">
                              <div className="new-comment-time">
                                {getMonthDayHouMin(item.time)}
                              </div>
                              <div className="new-comment-dz">
                                {item.user.userId === userId ? (
                                  <div className="deleteD">
                                    <span className="delete">删除</span>
                                    <span className="shu">|</span>
                                  </div>
                                ) : (
                                  <></>
                                )}
                                <i className="dz-icon icon2"></i>
                                {item.likedCount === 0 ? (
                                  <></>
                                ) : (
                                  item.likedCount
                                )}
                                <span className="shu">|</span>
                                <span>回复</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </React.Fragment>
                  );
                })
              : ""}
          </div>
          {props.comments.comments.length > 10 ? (
            <div className="ck-more">
              <span>
                后面还有{props.comments.total - 10}条评论,{" "}
                <NavLink
                  to={{
                    pathname: "/event",
                    search:
                      "?id=" +
                      props.commentId +
                      "&uid=" +
                      props.userId +
                      "?index=" +
                      props.index,
                    state: { index: props.index },
                  }}
                >
                  查看评论&gt;
                </NavLink>
              </span>
              <a onClick={props.getClose}>
                收起 <i className="sq-icon imgIcon"></i>
              </a>
            </div>
          ) : (
            <React.Fragment></React.Fragment>
          )}
        </div>
      ) : (
        <></>
      )}

      <div id="tcr">
        {/* <Pagination onChange={changePage} onClick={props.changeComment(pages)} total={props.comments.length!==0?props.comments.comments.length:""} showSizeChanger={false} itemRender={itemRender} /> */}
      </div>
    </UserByCommentWrap>
  );
});
